@extends('admin.layouts.app')

@section('title', '扫码记录 - 挪车小助手后台管理')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">扫码记录</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.print()">
                <i class="bi bi-printer"></i> 打印
            </button>
            <a href="{{ route('admin.scan-logs.export') }}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-download"></i> 导出
            </a>
        </div>
    </div>
</div>

<div class="row mb-3">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                扫码记录筛选
            </div>
            <div class="card-body">
                <form action="{{ route('admin.scan-logs.index') }}" method="GET" class="row g-3">
                    <div class="col-md-3">
                        <label for="scanner" class="form-label">扫码用户</label>
                        <input type="text" class="form-control" id="scanner" name="scanner" placeholder="扫码用户昵称" value="{{ request('scanner') }}">
                    </div>
                    <div class="col-md-3">
                        <label for="car_owner" class="form-label">车主</label>
                        <input type="text" class="form-control" id="car_owner" name="car_owner" placeholder="车主昵称/手机号" value="{{ request('car_owner') }}">
                    </div>
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">扫码时间从</label>
                        <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
                    </div>
                    <div class="col-md-3">
                        <label for="date_to" class="form-label">扫码时间至</label>
                        <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
                    </div>
                    <div class="col-md-3">
                        <label for="call_made" class="form-label">拨打状态</label>
                        <select class="form-select" id="call_made" name="call_made">
                            <option value="">全部</option>
                            <option value="1" {{ request('call_made') == '1' ? 'selected' : '' }}>已拨打</option>
                            <option value="0" {{ request('call_made') == '0' ? 'selected' : '' }}>未拨打</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="ip_address" class="form-label">IP地址</label>
                        <input type="text" class="form-control" id="ip_address" name="ip_address" placeholder="IP地址" value="{{ request('ip_address') }}">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">筛选</button>
                        <a href="{{ route('admin.scan-logs.index') }}" class="btn btn-secondary">重置</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                扫码记录列表
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>扫码用户</th>
                                <th>车主</th>
                                <th>联系电话</th>
                                <th>扫码时间</th>
                                <th>是否拨打</th>
                                <th>IP地址</th>
                                <th>设备信息</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($scanLogs as $log)
                                <tr>
                                    <td>{{ $log->id }}</td>
                                    <td>
                                        @if($log->scanner)
                                            <div class="d-flex align-items-center">
                                                @if($log->scanner->avatar_url)
                                                    <img src="{{ $log->scanner->avatar_url }}" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                                @endif
                                                <span>{{ $log->scanner->nickname ?: '未知用户' }}</span>
                                            </div>
                                        @else
                                            未知用户
                                        @endif
                                    </td>
                                    <td>
                                        @if($log->carOwner && $log->carOwner->user)
                                            <div class="d-flex align-items-center">
                                                @if($log->carOwner->user->avatar_url)
                                                    <img src="{{ $log->carOwner->user->avatar_url }}" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                                @endif
                                                <span>{{ $log->carOwner->user->nickname ?: '未知车主' }}</span>
                                            </div>
                                        @else
                                            未知车主
                                        @endif
                                    </td>
                                    <td>{{ $log->carOwner ? $log->carOwner->phone_number : '未知' }}</td>
                                    <td>{{ $log->scan_time }}</td>
                                    <td>
                                        @if($log->call_made)
                                            <span class="badge bg-success">已拨打</span>
                                        @else
                                            <span class="badge bg-secondary">未拨打</span>
                                        @endif
                                    </td>
                                    <td>{{ $log->ip_address }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="tooltip" title="{{ $log->device_info }}">
                                            <i class="bi bi-info-circle"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center">暂无扫码记录</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-center mt-3">
                    {{ $scanLogs->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                扫码统计
            </div>
            <div class="card-body">
                <canvas id="scanStatsChart" height="250"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                电话拨打统计
            </div>
            <div class="card-body">
                <canvas id="callStatsChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化提示框
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // 扫码统计图表
        const scanCtx = document.getElementById('scanStatsChart').getContext('2d');
        const scanChart = new Chart(scanCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($scanStats['labels']) !!},
                datasets: [{
                    label: '每日扫码次数',
                    data: {!! json_encode($scanStats['data']) !!},
                    backgroundColor: 'rgba(13, 110, 253, 0.2)',
                    borderColor: 'rgba(13, 110, 253, 1)',
                    borderWidth: 1,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
        
        // 电话拨打统计图表
        const callCtx = document.getElementById('callStatsChart').getContext('2d');
        const callChart = new Chart(callCtx, {
            type: 'doughnut',
            data: {
                labels: ['已拨打', '未拨打'],
                datasets: [{
                    data: [{!! $callStats['called'] !!}, {!! $callStats['not_called'] !!}],
                    backgroundColor: [
                        'rgba(40, 167, 69, 0.7)',
                        'rgba(108, 117, 125, 0.7)'
                    ],
                    borderColor: [
                        'rgba(40, 167, 69, 1)',
                        'rgba(108, 117, 125, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: '扫码后电话拨打比例'
                    }
                }
            }
        });
    });
</script>
@endsection 